<template>
  <div style="margin-top: 10px;">
    <div ref="chart" style="width: 100%; height: 70px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState } from 'vuex';

export default {
  name: 'RectangleChart',
  data() {
    return {
      // 数据值
      // data1: 100,
      // data2: 200,
      
    };
  },
  computed: mapState({
    totalWeight: function (state) {
      return state.data.orderData.totalWeight
    },
    todayWeight: function (state) {
      return state.data.orderData.todayWeight
    }
  }),
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);

      const option = {
        graphic: [
          // 绘制竖线分割
          {
            type: 'line',
            shape: {
              x1: '50%',
              y1: '0%',
              x2: '50%',
              y2: '100%'
            },
            style: {
              stroke: '#839AAC',
              lineWidth: 2
            }
          },
          // 左上角的数据（值在上，name在下）
          {
            type: 'text',
            left: '8%',
            top: '10%',
            style: {
              rich: {
                value: {
                  font: "bold 30px Arial", // 数值字体
                  fill: "#A8AFB9", // 数值颜色
                },
                unit: {
                  font: "14px Arial", // 单位字体
                  fill: "#839AAC", // 单位颜色
                  verticalAlign: "bottom",
                },
              },
              text: `{value|${this.totalWeight}} {unit|${"g"}}`, // 数值和单位用rich样式显示
            },
          },
          {
            type: 'text',
            left: '8%',
            bottom: '10%',
            style: {
              text: '累计回收',  // 显示名称
              font: '16px Arial',
              fill: '#839AAC'  // 设置名称的颜色
            }
          },
          // 右上角的数据
          {
            type: 'text',
            right: '8%',
            top: '10%',
            style: {
              rich: {
                value: {
                  font: "bold 30px Arial", // 数值字体
                  fill: "#A8AFB9", // 数值颜色
                },
                unit: {
                  font: "14px Arial", // 单位字体
                  fill: "#839AAC", // 单位颜色
                  verticalAlign: "bottom",
                },
              },
              text: `{value|${this.todayWeight}} {unit|${"g"}}`, // 数值和单位用rich样式显示
            },
          },
          {
            type: 'text',
            right: '8%',
            bottom: '10%',
            style: {
              text: '今日回收',
              font: '16px Arial',
              fill: '#839AAC'  // 设置名称的颜色
            }
          },
        ]
      };

      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
/* 如果需要，可以添加自定义的样式 */
</style>
